<template>
  <div id="home-box">
    <div class="bannerBox">
      <mt-swipe :auto="4000">
        <mt-swipe-item v-for="(item,index) in bannerList" :key="index">
          <img :src="item">
        </mt-swipe-item>
      </mt-swipe>
      <div class="informationss" @click="toggleMeun"></div>
      <ul v-show="$store.state.mark" class="supMuen">
        <li>
          <a href="javasrcipt:;">即将还款</a>
        </li>
        <li>
          <a href="javasrcipt:;">站内信</a>
        </li>
        <li>
          <a href="javasrcipt:;">优惠卷</a>
        </li>
      </ul>
    </div>
    <div class="msg">
      <i class="xiaoxi"></i>
      <mt-swipe :show-indicators="false" :auto="4500">
        <mt-swipe-item>平台良性退出兑付方案确认统计结果</mt-swipe-item>
        <mt-swipe-item>小狗钱钱良性退出兑付方案确认报名</mt-swipe-item>
        <mt-swipe-item>小狗钱钱良性退出公告</mt-swipe-item>
      </mt-swipe>
      <i class="gonggao"></i>
    </div>
    <!-- 智投 -->
    <hot-prouduct></hot-prouduct>
    <!-- 金融产品 -->
    <div class="proproduct">
      <financial-prouduct></financial-prouduct>
    </div>
    <!-- 站点信息 -->
    <ul class="sideMsg">
      <li>
        <p>关于我们</p>
        <p>全民所有制国资控股</p>
      </li>
      <li>
        <p>信息披露</p>
        <p>出借资金由江西银行存管</p>
      </li>
    </ul>
    <!-- 尾 -->
  </div>
</template>

<script>
import axios from "axios";
import HotProuduct from "../components/HotProuduct";
import FinancialProuduct from "../components/FinancialProuduct";
export default {
  name: "",
  data() {
    return {
      bannerList: [],
      meunFlag: true
    };
  },
  components: {
    HotProuduct,
    FinancialProuduct
  },
  created() {
    this.getBanner();
  },
  mounted() {
    console.log(this);
  },
  methods: {
    getBanner() {
      //获取轮播图信息
      axios
        .get(
          "https://www.easy-mock.com/mock/5cef4d4635893419511b7db6/example/dogBanner"
        )
        .then(
          function(response) {
            this.bannerList = response.data.data;
          }.bind(this)
        )
        .catch(function(error) {
          console.log(error);
        });
    },
    toggleMeun() {
      this.$emit("markHannel");
      this.$store.commit("toggleMakr");
    }
  }
};
</script>

<style lang='scss' scoped>
body {
  background: #f3f8fc;
}
p {
  margin: 0px;
}
// 头部轮播盒子
.bannerBox {
  height: 1.57rem;
  position: relative;
  background: #ffffff;
}
//头部菜单按钮
.informationss {
  position: fixed;
  right: 0rem;
  top: 0rem;
  background: url("../../public/images/information.png") no-repeat center center;
  background-size: 15px 15px;
  height: 0.35rem;
  width: 0.35rem;
}
//头部菜单
.supMuen {
  position: fixed;
  right: 0px;
  top: 0.35rem;
  background: #f3f8fc;
  width: 1.41rem;
  z-index: 111;
  & > li {
    height: 0.47rem;
    line-height: 0.47rem;
    border-bottom: 1px solid #bbc2cd;
    padding-left: 0.4rem;
    &:nth-of-type(1) {
      background: url("../../public/images/jjhk.png") no-repeat 0.1rem 0.16rem;
      background-size: 0.2rem 0.16rem;
    }
    &:nth-of-type(2) {
      background: url("../../public/images/znx.png") no-repeat 0.1rem 0.14rem;
      background-size: 0.2rem 0.2rem;
    }
    &:nth-last-of-type(1) {
      border-bottom: none;
      background: url("../../public/images/yhj.png") no-repeat 0.11rem 0.17rem;
      background-size: 0.2rem 0.14rem;
    }
    & > a {
      font-size: 0.15rem;
      color: #0e2642;
    }
  }
}
.supMuen::before {
  content: "";
  position: absolute;
  height: 0px;
  width: 0px;
  border-style: solid;
  border-color: transparent transparent #f3f8fc;
  border-width: 0 10px 12px;
  right: 7px;
  top: -8px;
}
//轮播样式
.mint-swipe {
  height: 100%;
  img {
    height: 100%;
    width: 100%;
  }
}
//站点消息通告
.msg {
  background: #ffffff;
  width: 100%;
  height: 0.4rem;
  line-height: 0.4rem;
  padding: 0 0.15rem;
  & .mint-swipe {
    width: 2.25rem;
    float: left;
    font-size: 0.12rem;
    color: #0e2642;
  }
  & > i {
    display: block;
    width: 0.29rem;
    height: 100%;
    float: left;
    &:nth-of-type(1) {
      background: url("../../public/images/xiaoxi.png") no-repeat left center;
      background-size: 0.25rem 0.25rem;
    }
    &:nth-of-type(2) {
      background: url("../../public/images/gonggao.png") no-repeat right center;
      background-size: 0.2rem 0.05rem;
    }
  }
}

.proproduct {
  background: #ffffff;
}
.sideMsg {
  padding: 0.15rem 0 0.3rem;
  display: flex;
  & > li {
    width: 50%;
    text-align: center;
    p:nth-of-type(1) {
      margin-bottom: 0.05rem;
      padding-left: 0.15rem;
      line-height: 0.3rem;

    }
    p:nth-of-type(2){
      font-size: 0.12rem;
      line-height: 0.16rem;
      color: #888FA1;
      
    }
    &:nth-of-type(1){
      p:nth-of-type(1){
        background: url('../../public/images/gywm.png') no-repeat 33px center;
        background-size:0.2rem;

      }
    }
    &:nth-of-type(2){
      p:nth-of-type(1){
        background: url('../../public/images/aqbz.png') no-repeat 33px center;
        background-size:0.2rem;
      }
    }
  }
}
</style>